<template>
  <a-card title="实时交易量趋势" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
    <a-row>
      <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
        <div class="clickme">点击我</div>
        <div class="transcount-left">
          <p>实时交易量</p>
          <h3 v-if="totalTradingVolumeToday">{{ totalTradingVolumeToday | format }}</h3>
          <a-spin v-else />
          <ul class="compared">
            <li>
              <p>前日昨日对比增长率</p>
              <span :class="[ dayyesterday > 0?'rise':'fall']">{{ Math.abs(dayyesterday) }}% <a-icon
                :type="dayyesterday > 0 ? 'rise' : 'fall'" /></span>
            </li>
            <li>
              <p>昨日今日对比增长率</p>
              <span :class="[ yesterdayToday > 0?'rise':'fall']">{{ Math.abs(yesterdayToday) }}% <a-icon
                :type="yesterdayToday > 0 ? 'rise' : 'fall'" /></span>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
        <p>最近3小时交易量趋势</p>
        <ve-line
          ref="userCount"
          :data="tendencyData"
          :settings="hourSettings"
          :extend="chartExtend"
          :colors="hourcolors"
          :judge-width="true"
          height="200px">
        </ve-line>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
export default {
  name: 'Tendency',
  components: {
  },
  data () {
    return {
      dayyesterday: -0.19, // 前日昨日对比增长率
      yesterdayToday: 11.29, // 昨日今日对比增长率
      totalTradingVolumeToday: 2032989, // 实时交易量
      hourcolors: ['#4688f1', '#759574', '#ecac6c'],
      hourSettings: {
        // xAxisType: 'time'
      },
      chartExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
          // symbol: 'none',
        }
      },
      tendencyData: {
        columns: ['日期', '交易量'],
        rows: [
          { '日期': '2021-01-10 12:00:00', '交易量': 421 }
        ]
      }
    }
  },
  created () {
    this.getTendencyData()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 最近3小时交易量趋势
     */
    getTendencyData () {
      // 生产当月的开始日期
      const startDate = moment().month(moment().month()).startOf('month').valueOf()
      const endDate = moment().month(moment().month()).endOf('month').valueOf()
      for (let i = 0; i < 400; i += 1) {
        this.tendencyData.rows.push({
          '日期': moment.utc(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '交易量': Math.floor(Math.random() * 1000)
        })
      }
      this.tendencyData.rows.sort(function (a, b) {
          return Date.parse(a[ '日期' ]) - Date.parse(b[ '日期' ]) // 时间正序
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .transcount-left{
    width: 100%;
    padding:10px;
    margin-right: 20px;
    float: left;
    p{
      font-size: 13px;
    }
    h3{
      font-size: 30px;
      color: #00A8FE;
    }
    .compared{
      list-style: none;
      padding: 0;
      margin: 0;
      li{
        float: left;
        width: 50%;
        span{
          font-size: 15px;
          .anticon-rise{
            color: #fa4145;
            font-size: 17px;
          }
          .anticon-fall{
            color: #5dd48c;
            font-size: 17px;
          }
        }
        .rise{
          color:#fa4145;
        }
        .fall{
          color:#5dd48c;
        }
      }
    }
  }
</style>
